import React from 'react';
import './index.css';
import { Input, Select, DatePicker,Button } from 'antd';
import UpCamera from '../../../Component/UpCamera';
import AuthenticationServer from "../../../Server/Authentication";
import UserCheck from '../../../utils/UserCheck';
import CommonUtil from "../../../utils/Common";

//无人机认证
export default class productInfo extends React.Component{
    //点击飞行器保险
    constructor(props){
        super();
        this.state = {
            index: 2,//无保险
            name:"",
            dronePic:"",
            type:"",
            brand:"",
            modelID:"",
            sn:"",
            hasInsurance:"",
            insuranceCompany:"",
            insuranceSN:"",
            insuranceStart:"",
            insuranceEnd:"",
            insurancePic:"",

            err:""
        };
    }
    ClickRadio = (param)=>{
        return (event)=>{
            this.setState({ 
                index: param,
                hasInsurance:param===1
            },()=>{
                CommonUtil.ResizeIFrame();
            });
        }
        
    }
    ChangeDronePic(data){
        this.setState({
            dronePic:data.originFileObj
        });
    }
    ChangeInsurancePic(data){
        this.setState({
            insurancePic:data.originFileObj
        });
    }
    StartChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            insuranceStart:dateStr,
        });
    }
    EndChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            insuranceEnd:dateStr,
        });
    }
    SetErr(err){
        this.setState({
            err
        });
    }
    Clear(){
        this.setState({
            err:""
        });
    }
    Save(){
        AuthenticationServer.AddAuthenticationAerocraft(UserCheck.GetUserID(),
        this.state.name,this.state.brand,this.state.type,
        this.state.modelID,this.state.sn,
        this.state.hasInsurance,this.state.insuranceCompany,
        this.state.insuranceSN,this.state.insuranceStart+'-'+this.state.insuranceEnd,
        this.state.dronePic,this.state.insurancePic)
        .then(response=>{
            console.log(response);
        },reject=>{
            this.SetErr(reject.msg);
        });
    }
    render(){
        let insuranceNode="";
        if(this.state.hasInsurance===true){
            CommonUtil.ResizeIFrame();
            insuranceNode=(
                <div>
                    <div className="ProductInfo_Out_Camera">
                        <div>
                            <UpCamera disabled={true} title="上传无人机实拍图" src="/assets/Drone/uploadDrone.png"/>
                        </div>
                        <div>
                            <UpCamera Change={e=>this.ChangeInsurancePic(e)}  title="上传保险实拍图" src=""/>
                        </div>
                    </div>
                    <div className="ProductInfo_Out_Remark">
                        <span>*</span>
                        <span>请将认证证书内容页拍照并上传（务必确保证书与本人实名认证信息相符）</span>
                    </div>
                    <div className="ProductInfo_Out_Row">
                        <span className="ProductInfo_Out_Row_Title">保险公司</span>
                        <div className="ProductInfo_Out_Row_Body">
                            <Select placeholder="请选择" style={{ width: '100%' }}/>
                        </div>
                    </div>
                    <div className="ProductInfo_Out_Row">
                        <span className="ProductInfo_Out_Row_Title">保险单号</span>
                        <div className="ProductInfo_Out_Row_Body">
                            <Input placeholder="请输入保险单号" onChange={e=>this.setState({insuranceSN:e.target.value})}/>
                        </div>
                    </div>
                    <div className="ProductInfo_Out_Row">
                        <span className="ProductInfo_Out_Row_Title">保险有限期</span>
                        <div className="ProductInfo_Out_Row_Body">
                            <DatePicker style={{ width: '48%' }}  onChange={e=>this.StartChange(e)}/>
                            <span className="ProductInfo_Out_Row_Span">~</span>
                            <DatePicker style={{ width: '48%' }}  onChange={e=>this.EndChange(e)}/>
                        </div>
                    </div>
                </div>
            );
        }
        return (
            <div className="ProductInfo_Out">
                
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">标题</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <Input placeholder="请输入标题" onChange={e=>this.setState({name:e.target.value})}/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Camera">
                    <div>
                        <UpCamera disabled={true} title="上传无人机实拍图" src="/assets/Drone/uploadDrone.png"/>
                    </div>
                    <div>
                        <UpCamera Change={e=>this.ChangeDronePic(e)} title="上传无人机实拍图" src=""/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Remark">
                    <span>*</span>
                    <span>请将无人机与控制器置于同一处并拍摄图片（请拍清SN）</span>
                </div>
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">无人机类型</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <Input placeholder="请输入无人机类型" onChange={e=>this.setState({type:e.target.value})}/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">无人机品牌</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <Input placeholder="请输入无人机品牌" onChange={e=>this.setState({brand:e.target.value})}/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">无人机型号</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <Input placeholder="请输入无人机型号" onChange={e=>this.setState({modelID:e.target.value})}/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">输入SN号</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <Input placeholder="请输入SN号" onChange={e=>this.setState({sn:e.target.value})}/>
                    </div>
                </div>
                <div className="ProductInfo_Out_Row">
                    <span className="ProductInfo_Out_Row_Title">飞行器保险</span>
                    <div className="ProductInfo_Out_Row_Body">
                        <div onClick={ this.ClickRadio(1)} className={this.state.index===1?"ProductInfo_Out_Active":"ProductInfo_Out_Radio"}>有</div>
                        <div onClick={ this.ClickRadio(2)} className={this.state.index===2?"ProductInfo_Out_Active":"ProductInfo_Out_Radio"}>无</div>
                    </div>
                </div>
                
                {
                   insuranceNode
                }
                
                <div>
                    <font color="red">{this.state.err}</font>
                </div>
                <div className="ProductInfo_Out_Bottom">
                    <Button>继续添加</Button>
                    <Button onClick={e=>this.Save(e)}>提交认证</Button>
                </div>
            </div>
        )
    }
}